<template>
	<view class="carInfo">
		<u-text text="车辆信息" align="center" size="20" bold></u-text>
			<u-row style="flex-direction: row;" align="top">
				<u-col span="3.5">
					<view style="flex-direction: column;">
						<u-col class="bgImg">
							<view style="margin: 5rpx 0 0 10rpx;">
								<u-col style="flex-direction: row;">
									<u-text text="基本信息" prefixIcon="/static/vehicleInformation/basic_icon.png" bold margin="0 0 3rpx 10rpx" iconStyle="width: 25px;height: 25px"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="车主姓名" color="gray" size="12"></u-text>
									<u-text :text="carInfo.ownerDriver" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="车辆品牌" color="gray" size="12"></u-text>
									<u-text :text="carInfo.vehicleBrand+carInfo.vehicleModel" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="车架号信息" color="gray" size="12"></u-text>
									<u-text :text="carInfo.frameNumberInformation" color="gray" size="10"></u-text>
								</u-col>
							</view>
						</u-col>
						<u-col class="bgImg">
							<view style="margin: 5rpx 0 0 10rpx;">
								<u-col style="flex-direction: row;">
									<u-text text="电动机信息" prefixIcon="/static/vehicleInformation/zd_icon.png" bold margin="0 0 3rpx 10rpx" iconStyle="width: 25px;height: 25px"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="总功率" color="gray" size="12"></u-text>
									<u-text :text="carInfo.totalPower" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="总扭矩信息" color="gray" size="12"></u-text>
									<u-text :text="carInfo.totalTorqueInformation" color="gray" size="10"></u-text>
								</u-col>
							</view>
						</u-col>
						<u-col class="bgImg">
							<view style="margin: 5rpx 0 0 10rpx;">
								<u-col style="flex-direction: row;">
									<u-text text="电池信息" prefixIcon="/static/vehicleInformation/ele_icon.png" bold margin="0 0 3rpx 10rpx" iconStyle="width: 25px;height: 25px"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="电池容量" color="gray" size="12"></u-text>
									<u-text text="100%" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="电池品牌" color="gray" size="12"></u-text>
									<u-text :text="carInfo.batteryBrand" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="百公里耗电" color="gray" size="12"></u-text>
									<u-text :text="carInfo.powerConsumption+'Wh/km'" color="gray" size="10"></u-text>
								</u-col>
							</view>
						</u-col>
					</view>
				</u-col>
				<u-col span="5" style="margin-top: 100rpx;">
					<u-col>
						<u-image src="@/static/vehicleInformation/car_info_center.png" height="130rpx" mode="widthFix"></u-image>
					</u-col>
					<u-col class="bgImg" style="padding-bottom: 15rpx;">
						<view style="margin: 10rpx 0 0 10rpx; p">
							<u-text text="车辆信息" prefixIcon="/static/vehicleInformation/car_info_icon.png" bold iconStyle="width: 25px;height: 25px" margin="0 0 3rpx 0"></u-text>
							<u-col style="flex-direction: row;">
								<u-col span="5" style="border-right: 1rpx solid #fff; margin-right: 15rpx;">
									<u-col style="flex-direction: row; flex: 0;">
										<u-text text="长宽" color="gray" size="12" style="flex: 0.5;"></u-text>
										<u-text :text="`${carInfo.vehicleLength} X ${carInfo.vehicleWidth}mm`" color="gray" size="10"></u-text>
									</u-col>
									<u-col style="flex-direction: row; flex: 0;">
										<u-text text="轴距" color="gray" size="12"></u-text>
										<u-text :text="`${carInfo.wheelBase}mm`" color="gray" size="10"></u-text>
									</u-col>
									<u-col style="flex-direction: row; flex: 0;">
										<u-text text="前后轮距" color="gray" size="12"></u-text>
										<u-text :text="`${carInfo.wheelTrack}mm`" color="gray" size="10"></u-text>
									</u-col>
								</u-col>
								<u-col span="6">
									<u-col style="flex-direction: row; flex: 0;">
										<u-text text="整备质量" color="gray" size="12"></u-text>
										<u-text :text="`${carInfo.curbWeight}kg`" color="gray" size="10"></u-text>
									</u-col>
									<u-col style="flex-direction: row;">
										<u-text text="后备箱容积" color="gray" size="12"></u-text>
										<u-text :text="`${carInfo.trunkVolume}L`" color="gray" size="10"></u-text>
									</u-col>
								</u-col>
							</u-col>
						</view>
					</u-col>
				</u-col>
				<u-col span="3.5">
					<view style="flex-direction: column;">
						<u-col class="bgImg" style="height: 110rpx;">
							<view style="margin: 10rpx 0 0 10rpx;">
								<u-text text="底盘/制动信息" prefixIcon="/static/vehicleInformation/bottom_icon.png" bold margin="0 0 3rpx 10rpx" iconStyle="width: 25px;height: 25px"></u-text>
								<u-col style="flex-direction: row;">
									<u-text text="驱动形式" color="gray" size="12"></u-text>
									<u-text :text="carInfo.drivingForm" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="前悬挂类型" color="gray" size="12"></u-text>
									<u-text :text="carInfo.frontSuspensionType" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="后悬挂类型" color="gray" size="12"></u-text>
									<u-text :text="carInfo.rearSuspensionType" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="转向助力形式" color="gray" size="12"></u-text>
									<u-text :text="carInfo.steeringPowerForm" color="gray" size="10"></u-text>
								</u-col>
							</view>
						</u-col>
						<u-col class="bgImg" style="height: 150rpx;">
							<view style="margin: 10rpx 0 0 10rpx;">
								<u-text text="车轮制动信息" prefixIcon="/static/vehicleInformation/zd_icon.png" bold margin="0 0 3rpx 10rpx" iconStyle="width: 25px;height: 25px"></u-text>
								<u-col style="flex-direction: row;">
									<u-text text="前/后制动器" color="gray" size="12"></u-text>
									<u-text :text="carInfo.frontAndRearBrakeTypes" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="驻车制动" color="gray" size="12"></u-text>
									<u-text :text="carInfo.parkingBrakeType" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="前轮胎规格" color="gray" size="12"></u-text>
									<u-text :text="carInfo.frontTireSpecification" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="后轮胎规格" color="gray" size="12"></u-text>
									<u-text :text="carInfo.rearTyreSpecification" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="轮毂材质" color="gray" size="12"></u-text>
									<u-text :text="carInfo.hubMaterial" color="gray" size="10"></u-text>
								</u-col>
								<u-col style="flex-direction: row;">
									<u-text text="备胎规格" color="gray" size="12"></u-text>
									<u-text :text="carInfo.spareGauge" color="gray" size="10"></u-text>
								</u-col>
							</view>
						</u-col>
						<u-col class="bgImg" style="height: 80rpx;">
							<view style="margin: 5rpx 0 0 10rpx;">
								<u-text text="检测记录" prefixIcon="/static/vehicleInformation/taiya_loding.png" bold margin="0 0 3rpx 10rpx" iconStyle="width: 25px;height: 25px" style="flex: 0.7;"></u-text>
								<u-text text="历史记录>" @click="goToHistory" color="gray" size="12"  margin="10rpx 0 3rpx 10rpx"></u-text>
							</view>
						</u-col>
					</view>
				</u-col>
			</u-row>
		<bottom></bottom>
	</view>
</template>

<script>
	import bottom from "@/components/bottom/index.vue"
	import { getRechargeVehicle } from "@/config/api/car.js";
	export default {
		components: {
			bottom
		},
		data() {
			return {
				carInfo:{}
			}
		},
		mounted() {
			  getRechargeVehicle(1).then(res => {
			  	Object.assign(this.carInfo,res)
			  })
		},
		methods: {
			//跳转到历史记录
			goToHistory(){
				uni.redirectTo({
					url:"/pages/vehicleInformation/history"
				})
			}
		}
	}
</script>

<style scoped>
	.carInfo {
		width: calc(100% - 30px);
		margin: 0 auto;
		padding-top: 10rpx;
	}
	.bgImg {
		height: 100rpx;
		background: url("@/static/card_bg1.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>